@use "@/common/styles/colors"

.dialog-area
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  width: 100%
  height: 100%
  background-color: colors.$dialog-background
  display: flex
  align-items: center
  z-index: 1000
  justify-content: center
  backdrop-filter: blur(0.5rem)
  transition: all 0.2s
  animation: opacity 0.3s

.dialog-area-hidden
  opacity: 0
  animation: opacity 0.3s reverse

.dialog
  padding: 15px
  background-color: colors.$darker-gray
  border: 1px solid colors.$dark-gray
  color: colors.$white
  backdrop-filter: blur(1rem)
  border-radius: 15px
  max-width: 90%
  max-height: 90vh
  overflow-y: auto
  transition: all 0.2s
  animation: fadeIn 0.3s

.dialog-hidden
  visibility: hidden
  opacity: 0
  animation: fadeOut 0.3s

@keyframes fadeIn
  0%
    opacity: 0
    transform: scale(0.4)
    filter: blur(5px)
  100%
    opacity: 1

@keyframes fadeOut
  0%
    opacity: 1
  100%
    opacity: 0
    transform: scale(0.4)
    filter: blur(5px)